<template>
  <div v-highlight class="markdown-body" >
    <el-row class="main" type="flex" justify="center">
      <el-col :span="16">
        <!-- 问题的头部-->
        <ahead :article="question"></ahead>
        <!--				这里放个富文本编辑器-->
        <div v-if="user.uname!=null">
          <!-- 图片上传组件辅助-->
          <el-upload
            class="avatar-uploader"
            :action="serverUrl"
            name="img"
            :headers="header"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload"
          ></el-upload>

          <el-card style="height: 500px;margin-top: 20px">
            <el-row v-loading="quillUpdateImg">
              <quill-editor
                v-model="Comment.commentFomat"
                ref="myQuillEditor"
                style="height: 340px;"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @change="onEditorChange($event)"
              ></quill-editor>
            </el-row>
          </el-card>
          <el-row class="flex-right" style="margin-top: 5px">
            <el-button type="primary" @click="Onsubmit()">提交回答</el-button>
          </el-row>
        </div>
        <hr />
        <el-card type="flext" justify="center" class="title">
          <div>查看全部回复</div>
        </el-card>
        <!--				评论（回答的）内容-->
        <el-card v-for="comment in commentList" :key="comment.id" style="margin-bottom: 15px">
          <comment-cell :comment="comment"></comment-cell>
        </el-card>

        <!--	文章详细底部模板-->
        <div id="statement">
          <div class="item">{{$t('article.author')}}：小熊</div>
          <div class="item">{{$t('article.copyright')}}：本博客所有文章除特别声明外,转载请注明出处!</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ArticleDetailHeader from "../components/head/Adetail-head";

//引入操作数据的api
import { publishComment } from "../api";
import { like } from "../api";
import { dislike } from "../api";
import { getComments } from "../api";
import { getQuestionByID } from "../api";

import commentCell from "../components/content/commentCell";
//引入富文本编辑器
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import storage from "../model/storage";

export default {
  name: "article",
  components: {
    ahead: ArticleDetailHeader,
    commentCell: commentCell,
    quillEditor
  },
  //存放数据的地方
  data() {
    return {
      quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
      serverUrl: "", // 这里写你要上传的图片服务器地址
      header: { token: sessionStorage.token }, // 有的图片服务器要求请求头需要有token之类的参数，写在这里
      detailContent: "", // 富文本内容
      //可以在这里自定义编辑框的样式
      editorOption: {
        placeholder: "",
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function(value) {
                //要是点击图片上传，就打开饿了马的控件
                if (value) {
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      },
      //问题的详细信息
      question: "",
      //评论的信息
      commentList: "",
      //评论封装的json
      Comment: {
        //评论ID
        id: "",
        //评论用户ID
        uid: "",
        //点赞数
        likenum: "",
        //评论内容
        content: "",
        //被评论的文章(问题)ID
        aid: this.$route.params.id,
        //评论转为HTML
        commentFomat: ""
      },
      //点赞信息
      likeInfo: {
        //被点赞的评论ID
        cid: "",
        //点赞的用户ID
        uid: ""
      },
      //问题ID
      qid: "",
      //当前用户的信息
      user: {
        uid: "",
        uname: ""
      }
    };
  },
  methods: {
    // 上传图片前
    beforeUpload(res, file) {
      alert("开始传图片");
      this.quillUpdateImg = true;
    },
    // 上传图片成功
    uploadSuccess(res, file) {},
    // 上传图片失败
    uploadError(res, file) {
      // loading动画消失
      this.quillUpdateImg = false;
      this.$message.error("图片插入失败");
    },

    onEditorBlur() {
      //失去焦点事件
    },
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件

    },
    Onsubmit() {
      //提交的时候，设置评论的用户ID
      this.Comment.uid = this.user.uid;
      console.log("我写完了" + this.Comment);
      publishComment(this.Comment).then(result => {
        if (result.data.code == 0) {
          this.$message.success("回复成功");
          //清空输入栏
          this.Comment.commentFomat = "";
          //更新问题列表
          this.initComment();
        } else {
          this.$message.error("失败，请联系管理员");
        }
      });
    },
    //初始化评论
    initComment() {
      getComments(this.qid).then(result => {
        if (result.data.code == 200) {
          this.commentList = result.data.commentlist;
          console.log(this.commentList);
        }
      });
    },
    //初始化问题信息
    initQuestion() {
      getQuestionByID(this.qid).then(result => {
        console.log(result);
        this.question = result.data.question;
      });
    }
  },
  created() {
    //拿到问题ID
    this.qid = this.$route.params.id;
    console.log(this.qid);
    this.initComment();
    this.initQuestion();
    //从哪store中取出用户的信息
    this.user.uname = storage.get("username");
    this.user.uid = storage.get("uid");

    console.log(this.user.uname);
  }
};
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction

  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ["link", "image", "video"],
  ["clean"] // remove formatting button
];
</script>

<style scoped>
#artcle-info {
  padding: 20px;
  background-image: url(../assets/vue.jpg);
  margin-bottom: 40px;
}

#artcle-info .abstract {
  color: #ffffff;
  border-left: 3px solid #f56c6c;
  padding: 10px;
  background-color: rgba(126, 129, 135, 0.3);
}

#artcle-info .timeAndView {
  padding: 20px;
  line-height: 30px;
  font-size: 16px;
  color: #ffffff;
}

pre.has {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.8);
}

img.has {
  width: 100%;
}

.title{
	margin-top: 10px;
	margin-bottom: 10px;

}
.title div{
	text-align: center;
	color: darkgray;
}
.title div :hover{
	color: blue;
}
#statement {
  border-left: 3px solid #f56c6c;
  padding: 20px;
  background-color: #ebeef5;
}
</style>
